<template>
  <div style="padding: 20px">
    <pageTools style="margin-bottom:10px">
      <!-- 写法:# / slot / v-slot -->
      <template #left>
        <el-tag>共 {{ total }} 条记录</el-tag>
      </template>
      <template #right>
        <el-button size="mini" type="success" @click="$router.push('/upload?type=user')">excel导入</el-button>
        <el-button v-arrowsBtn="'q3'" size="mini" type="danger" @click="handleDownload">excel导出</el-button>
        <el-button size="mini" type="primary" @click="addEmployee">新增员工</el-button>
      </template>
    </pageTools>

    <!-- 表格 -->
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="序号" width="66" type="index" />
        <el-table-column sortable prop="username" label="姓名" width="120" />
        <el-table-column sortable label="头像" width="120" align="center">
          <template slot-scope="scope">
            <img v-imgError="defaultImg" :src="scope.row.staffPhoto" alt="" style="width:80px">
          </template>
        </el-table-column>
        <el-table-column sortable prop="mobile" label="手机号" width="120" />
        <el-table-column sortable prop="workNumber" label="工号" width="120" />
        <el-table-column sortable label="聘用形式" width="120">
          <template slot-scope="scoped">
            {{ formatEmployment(scoped.row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column sortable prop="departmentName" label="部门" width="120" />
        <el-table-column sortable prop="correctionTime" label="入职时间" width="120" />
        <el-table-column sortable prop="formOfEmployment" label="状态" width="80">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row.id)">查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>
            <el-button type="text" size="small" @click="roleHandle(scope.row.id)">角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <div style="font-size: 14px">共 {{ total }} 条</div>
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageObj.size"
          layout="slot,sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 对话框 -->
    <el-dialog
      title="添加员工"
      :visible.sync="dialogFormVisible"
    >
      <employeeDialog
        v-if="dialogFormVisible"
        @success="success"
      />
    </el-dialog>

    <!-- 角色Dialog -->
    <el-dialog
      title="角色权限"
      :visible.sync="dialogRoleVisible"
    >
      <roleDialog v-if="dialogRoleVisible" ref="roleDialog" @success="dialogRoleVisible=false" />
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeeList } from '@/api/employees'
import defaultImg from '@/assets/common/head.jpg'
import EmployeeEnum from '@/constant/employees'
import employeeDialog from './employeeDialog.vue'
// import en from 'element-ui/lib/locale/lang/en'
import roleDialog from './roleDialog.vue'
export default {
  name: 'Employees',
  components: {
    employeeDialog,
    roleDialog
  },
  data() {
    return {
      defaultImg,
      value: true,
      tableData: [],
      pageObj: {
        page: 1,
        size: 5
      },
      total: 0,
      currentPage4: 1,
      dialogFormVisible: false,
      dialogRoleVisible: false,
      id: ''
    }
  },
  computed: {},
  created() {
    this.loadEmployee()
  },
  methods: {
    async loadEmployee() {
      const res = await getEmployeeList(this.pageObj)
      console.log(res, 9999)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageObj.size = val
      this.loadEmployee()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageObj.page = val
      this.loadEmployee()
    },
    formatEmployment(num) {
      var obj = EmployeeEnum.hireType.find((item) => item.id == num)
      console.log(obj, num, 999999)
      return obj.value
    },
    addEmployee() {
      this.dialogFormVisible = true
    },
    success() {
      this.dialogFormVisible = false
      this.loadEmployee()
    },
    handleClick(row) {
      // 声明式导航 ==> router-link
      // 编程式导航 ==> this.$router.push
      // this.$router.push('/employees/detail/' + row.id)               // path: 'detail/:id'
      // this.$router.push('/detail/' + row.id)                         // path: '/detail/:id'
      // this.$router.push({ path: '/detail/' + row.id })               // path: '/detail/:id'
      // this.$router.push({ name: 'detail', params: { id: row.id }})   // name: 'detail', path: '/detail/:id'
      // this.$router.push({ name: 'detail', query: { id: row.id }, params: { name: 'jack' }}) // name: 'detail', path: '/detail/:name'
      this.$router.push({ name: 'detail', params: { id: row.id }})
    },
    async handleDownload() {
      const res = await getEmployeeList({ page: 1, size: this.total })
      import('@/vendor/Export2Excel').then(excel => {
        // const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list = res.data.rows
        const data = this.formatJson(list)
        // console.log(data, 700)
        excel.export_json_to_excel({
          // multiHeader: [
          //   ['姓名', '年龄', '性别', '爱好', '', '', '', '', '', ''],
          //   ['姓名22', '年龄22', '性别', '爱好', '', '', '', '', '', '222']
          // ], // 二位数组  设置多表头
          // merges: ['A1:A2', 'B1:D1'], // 相当于设置合并单元格
          header: this.tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
    },
    formatJson(jsonData) {
      const map = {
        'id': '编号',
        'password': '密码',
        'mobile': '手机号',
        'username': '姓名',
        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      this.tHeader = Object.values(map)
      return jsonData.map((item) => {
        var newObj = {}
        var enKey = Object.keys(map)
        enKey.forEach(key => {
          newObj[map[key]] = item[key]
        })
        // console.log(newObj, 676767)
        return Object.values(newObj)
      })
    },
    roleHandle(id) {
      this.dialogRoleVisible = true
      this.$nextTick(() => {
        this.$refs.roleDialog.id = id
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.block {
  display: flex;
  justify-content: end;
  align-items: center;
  margin: 20px 0;
}
</style>
